<style scoped>
</style>

<template>

  <div>

    <Modal v-model="IsModalShow" :title="modalFormTitle" :mask-closable="false" @on-cancel="cancel" width="600">
      <Form ref="modalForm" :model="modalForm" :label-width="80" value=true style="padding: 3px 60px">
        <Form-item label="单位名称" prop="mainName" :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}">
          <Input v-model="modalForm.mainName"></Input>
        </Form-item>
        <Form-item label="责任人" prop="managerName" :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}">
          <Input v-model="modalForm.managerName"></Input>
        </Form-item>
        <Form-item label="联系电话" prop="managerMobile" :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}">
          <Input v-model="modalForm.managerMobile"></Input>
        </Form-item>
        <Form-item label="办公室电话" prop="officePhone">
          <Input v-model="modalForm.officePhone"></Input>
        </Form-item>
        <Form-item label="所属部门"  prop="departmentId"  :rules="{required: true, message: '必选', trigger:'change', type:'number'}">
          <Select v-model="modalForm.departmentId" placeholder="请选择">
            <Option v-for="item in deptList" :value="item.id" :key="item.id">{{ item.depName }}</Option>
          </Select>
        </Form-item>
        <Form-item label="单位地址" prop="mainAddr">
          <Input v-model="modalForm.mainAddr" type="textarea"></Input>
        </Form-item>
        <Form-item label="备注" prop="remark">
          <Input v-model="modalForm.remark" type="textarea"></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="ghost" @click="cancel">关闭</Button>
        <Button type="primary" :loading="modalForm_loading" @click="saveForm('modalForm')">保存
        </Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { saveMaintenance, getdeptList } from "./../../../api/getData";

export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          Id: "",
          mainName: "",
          mainAddr: "",
          managerName: "",
          managerMobile: "",
          officePhone: "",
          remark: "",
          departmentId: 1
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加维保单位"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      deptList: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.modalForm = Object.assign(this.parentForm);
      this.IsModalShow = curVal;
      if (curVal) {
        this.getDeptList();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    async getDeptList() {
      let result = await getdeptList({});
      if (result.code == 0) {
        this.deptList = result.data;
      }
    },
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          const params = this.modalForm;
          try {
            let result = await saveMaintenance(params);
            if (result.code == 0) {
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
